<template>

    <div class="min-h-screen bg-gray-50">
        <nav class="bg-white shadow-lg">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <span class="text-2xl font-[\'Pacifico\'] text-blue-600" style="cursor: pointer;" @click="home">トップページ</span>
                    </div>
                    <div class="flex items-center space-x-4 dvs">
                        <el-dropdown @command="handClick">
                            <button
                                class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 !rounded-button">
                                <i class="fas fa-user-circle mr-2 el-dropdown-link"></i>
                                個人学習センター
                            </button>
                            <el-dropdown-menu slot="dropdown" style="width: 200px;">
                                <el-dropdown-item command="a">ログアウト</el-dropdown-item>
                                <el-dropdown-item command="b">個人センター</el-dropdown-item>
                            </el-dropdown-menu>
                            
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </nav>

        <router-view></router-view>
    </div>
</template>
<script>
import Cookies from 'js-cookie'

export default {
    methods: {
        handClick(e) {
            if(e=="a"){
                Cookies.remove('token')
                this.$router.push({ path: '/login' })
            }else if(e=="b"){
                if(this.$route.path!='/user_center'){
                    this.$router.push({ path: '/user_center' })
                }
            }

        },
        home() {
            if (this.$route.path != '/') {
                this.$router.push({ path: '/' })
            }
        },
        toggleMenu() {
            this.isOpen = !this.isOpen;
        },

        selectItem() {
            this.isOpen = false; // 点击菜单项后关闭下拉菜单
        }
    }
}
</script>
<style>
.max-w-7xl {
    max-width: 90rem !important;
}
</style>